<template>
    <el-dialog :model-value="true" title="菜单详情" width="80%" :close-on-click-modal="false" append-to-body @close="() => emits('close')">
        <div class="pizza-detail">
            <div class="pizza-image">
                <img src="https://placehold.co/600x400" alt="夏威夷风情可可熔岩芝士流心卷边比萨">
            </div>
            <div class="pizza-info">
                <h2>夏威夷风情可可熔岩芝士流心卷边比萨</h2>
                <p>进口菠萝和火腿片组合，全球人气！</p>
                <p>配料：火腿、菠萝、马苏里拉芝士</p>
                <div class="size-selection">
                    <h3>尺寸</h3>
                    <el-radio-group v-model="selectedSize">
                        <el-radio-button label="9">9"</el-radio-button>
                        <el-radio-button label="12">12"</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="crust-selection">
                    <h3>饼底</h3>
                    <el-radio-group v-model="selectedCrust">
                        <el-radio-button label="可可熔岩芝士流心卷边">可可熔岩芝士流心卷边</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="sauce-selection">
                    <h3>底酱</h3>
                    <el-radio-group v-model="selectedSauce">
                        <el-radio-button label="经典番茄比萨酱">经典番茄比萨酱</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="ingredients">
                    <h3>基础配料</h3>
                    <el-checkbox-group v-model="selectedIngredients">
                        <el-checkbox label="马苏里拉芝士"></el-checkbox>
                        <el-checkbox label="菠萝"></el-checkbox>
                        <el-checkbox label="方形火腿片"></el-checkbox>
                    </el-checkbox-group>
                </div>
                <div class="additional-ingredients">
                    <h3>附加配料</h3>
                    <el-checkbox-group v-model="selectedAdditionalIngredients">
                        <el-checkbox label="烟熏鸡肉丁"></el-checkbox>
                        <el-checkbox label="玉米"></el-checkbox>
                        <el-checkbox label="薯角"></el-checkbox>
                        <el-checkbox label="虾仁"></el-checkbox>
                        <el-checkbox label="西兰花"></el-checkbox>
                        <el-checkbox label="金枪鱼"></el-checkbox>
                        <el-checkbox label="青椒"></el-checkbox>
                        <el-checkbox label="脆嫩烤虾仁"></el-checkbox>
                        <el-checkbox label="培根"></el-checkbox>
                        <el-checkbox label="意式香肠丁"></el-checkbox>
                        <el-checkbox label="意式香肠片"></el-checkbox>
                        <el-checkbox label="樱桃番茄"></el-checkbox>
                        <el-checkbox label="浓香鸡块"></el-checkbox>
                        <el-checkbox label="臻品菌菇"></el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
const emits = defineEmits(['close', 'success'])

const selectedSize = ref('9')
const selectedCrust = ref('可可熔岩芝士流心卷边')
const selectedSauce = ref('经典番茄比萨酱')
const selectedIngredients = ref(['马苏里拉芝士', '菠萝', '方形火腿片'])
const selectedAdditionalIngredients = ref([])
</script>

<style scoped>
.pizza-detail {
    /* display: flex; */
}

.pizza-image {
    flex: 1;
    text-align: center;
}

.pizza-info {
    flex: 2;
    padding-left: 20px;
}

.size-selection, .crust-selection, .sauce-selection, .ingredients, .additional-ingredients {
    margin-bottom: 20px;
}
</style>